前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

今天要來談一下常常在重構的時候會看到前人在 Vue 裡面引入 CSS 的幾個方式，以及讓我來跟你說我會怎麼做。

第一種：直接在 JS 裡面引入

import "@/assets/scss/index.scss"

優點
這種引入的方式你可以直接在讓你的CSS變成Global的CSS，你可以在任何的地方都吃的到你寫的Style。

缺點
CSS 之間的命名就要很小心，如果命名沒有注意可能會發生權重覆蓋的問題，而且在引入其他套件或是框架的CSS的時候，有可能還會互相影響到。

不過在使用第三方套件的時候很常會使用這種方式來引入，畢竟設計套件的時候也會考慮到CSS命名的問題，所以套件設計的CSS規則大部分都會參照OOCSS、SMACSS、BEM等命名規則，不會撞到，所以引入套件的時候文件上面說這樣用，就放心的用吧。

第二種：在 Vue 的 components 裡面 @import Scss 檔案

<template>
  <!-- template... -->
</template>

<script>
  // script...
</script>

<style lang="scss">
    @import "assets/scss/app.scss";
</style>

這個寫法其實不是很好，因為唯一的好處就是這個SCSS檔案放到對應的component裡面，然後知道這個SCSS是對應個component的，其他一點好處都沒有，CSS也會變成 Global CSS。

在component裡面引入SCSS的動作應該直接在style 上面用src引入，像是下面這樣，而不要使用@import。

<style lang="scss" src="../assets/scss/main.scss"></style>

那你可能會說，那有variables @mixin @extend @function 這類型的檔案應該要怎麼辦呢?

我們可以在 vue.config.js 裡面加入下面這些設定，不過要注意一下sass-loader 版本的問題，細節可以參考官方文件。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/variables.sass"`
      },
      scss: {
        prependData: `@import "~@/variables.scss";`
      },
    }
  }
}

官方文件： https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

不過這樣使用要小心，如果你把除了@mixin @extend @function 這些以外的一般CSS放進去的話，就會注入多餘的CSS到檔案裡面，所以會建議loaderOptions這個設定只用於variables @mixin @extend @function 這幾個功能裡面。

第三種：直接寫在 Vue 的 component 裡面

<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    > header {
      display: flex;
      .logo {
        width: 50px
      }
    }
  }
</style>

這是一個很常見的作法，但是這樣跟前面幾個方法一樣，會把 CSS 變成 Global 的，所以今天如果你有兩個component 裡面都有 .logo 這個 class 的話，那CSS就會互相干擾，所以我會推薦在 component 裡面使用 scoped這個方法。

<style lang="scss" scoped>
  // ...
</style>

當然引入外部scss的時候一樣也可以加上scoped

<style lang="scss" src="./assets/app.scss" scoped></style>

這樣就可以在不同的component寫一樣的class名稱，達到連CSS都組件化的用意，也就意味者我們常見的OOCSS、SMACSS、BEM等命名規則也就可以不需要使用。

加入了scoped 的 class 在 render 後會自動加上 hash 來區別，所以即使今天有其他 component 也使用了ul.tabs這個class，我們也不會產生衝突，是一個很棒很方便的功能。

詳細的介紹我們可以看vue-loader的文件 https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css

使用上該如何選擇 ?

首先對於原本就應該在Global的CSS我會使用import的方式在 index.js 引入

import "@/assets/scss/global.scss"

還有我們引入套件的時候也會在各 component import 引入( 以swiper為例 )

<script>  
    import 'swiper/swiper-bundle.css';  
    // ...
</script>

然後各component的CSS就直接在component的style裡面寫入，使用scoped的功能達到私有化的效果。

<style lang="scss" scoped>  
    // ...
</style>

有些套件本身有提供 class 讓我們去做客製化 style，或是其他的處理使用，但是因為scoped的關係，可能會對應不上，需要部份的 CSS 變成 Global，所以這時候我們其實可以再增加一個style的區塊直接寫需要的Global CSS 即可。

<template>
  <div id="app">
    <h1 class="title"></h1>
  </div>
</template>

<style lang="scss">
  //  其他需要Global的CSS...
</style>

<style lang="scss" scoped>
  #app {
    width: 100%;
    > h1.title {
      font-size: 20px;
    }
  }
</style>

唯獨我不會使用以下這種方式來引入使用 css

<style lang="scss">
    @import "assets/scss/app.scss";
</style>

看過很多人在寫 component 的時候，引入的方式跟使用的方式很多都不一致，一下scopsd，一下又 @import 這樣子的開發習慣其實不是很好，且難以維護，所以這次在這邊把關於如何撰寫以及如何載入外部的CSS整理出來，希望大家可以在寫 Vue 的時候也可以注意到 CSS 使用跟管理。

好啦! 今天就介紹到這邊，明天見!

那如果對於Vue3不夠熟的話呢?

Ps. 購買的時候請登入或註冊該平台的會員，然後再使用下面連結進入網站點擊「立即購課」，這樣才可以讓我獲得更多的課程分潤，還可以幫助我完成更多豐富的內容給各位。

我有開設了一堂專門針對Vue3從零開始教學的課程，如果你覺得不錯的話，可以購買我課程來學習
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果對於JS基礎不熟的朋友，我也有開設JS的入門課程，可以參考這個課程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

訂閱Mike的頻道享受精彩的教學與分享

Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號，好友搜尋 @mike_cheng